<template>
	<view id="ReceiveRedEnvelope">
		<view class="header">
			<div class="headPortrait">
				<image v-for="(item,index) in RedEnvelopeData.list" :key="index" :src="item.user.headImage" mode=""></image>
			</div>
			<div class="headTag">
				已有<span>{{RedEnvelopeData.total}}人</span>领取红包
			</div>
		</view>
		<view class="RedEnvelope">
			<p>{{RedEnvelopeData.info.title}}</p>
			<div>
				<image src="../../static/img/red_envelope_bg.png" mode=""></image>
				<button @click="RobRedEnvelope"></button>
			</div>
		</view>
		<view class="bgBox">
			<p>整点更新红包 借花献佛送好友</p>
			<button open-type="share"></button>
			<div class="gifts">
				<h6>好礼兑换</h6>
				<button class="aqy" @click="GiftExchange(12000,'爱奇艺VIP月卡')">
					<span>爱奇艺VIP月卡</span>
					<span>
						12000金币
						<span></span>
					</span>
				</button>
				<button class="tx" @click="GiftExchange(10000,'腾讯视频VIP月卡')">
					<span>腾讯视频VIP月卡</span>
					<span>
						10000金币
						<span></span>
					</span>
				</button>
			</div>
		</view>
		<view class="modalBox" v-if="modal">

		</view>
		<view class="modalContent" v-if="AuthorizationModal">
			<image src="../../static/img/authorization.png" mode=""></image>
			<h3>欢迎加入</h3>
			<p>授权立送5000金币还可以免费领红包</p>
			<span>每日最高能领50元</span>
			<div class="btn">
				<button @click="modal = false,AuthorizationModal = false">再想想</button>
				<!-- <button @click="onGotUserInfo">好,授权吧</button> -->
				<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">好,授权吧</button>
			</div>
		</view>
		<view class="winningBox" v-if="WinningShow">
			<image src="../../static/img/winning.png" mode=""></image>
			<h3>中奖了</h3>
			<p>恭喜您!</p>
			<p class="winningContent">
				获得金币
				<span>{{money}}</span>
			</p>
			<button>分享喜悦</button>
			<image class="close" src="../../static/img/close.png" mode="" @click="close"></image>
		</view>
		<view class="toastBox" v-if="toast">
			<div>
				<image src="../../static/img/GoldCoin.png" alt=""></image>
				<p>
					本次兑换将扣除
					<b>{{consumptionGold}}<span>金币</span></b>
				</p>
			</div>
			<button class="commit" @click="determine">确定</button>
			<image class="close" src="../../static/img/close.png" mode="" @click="close"></image>
		</view>
		<view class="toastBoxDouble" v-if="successShow">
			<div>
				<image src="../../static/img/success.png" alt=""></image>
				<p>
					兑换成功
				</p>
				<p>
					兑换码：{{convert}}
				</p>
			</div>
			<div class="btn">
				<button class="commit1" open-type="share">分享赚金币</button>
				<button class="cancel" @click="copy">复制兑换码</button>
			</div>
			<image class="close" src="../../static/img/close.png" mode="" @click="close"></image>
		</view>
		<view class="toastBoxDouble" v-if="failureShow">
			<div>
				<image src="../../static/img/error.png" alt=""></image>
				<p>
					兑换失败
				</p>
				<p>
					失败原因：{{failureTxt}}
				</p>
			</div>
			<div class="btn">
				<button class="commit1" open-type="share">分享赚金币</button>
				<button class="cancel" @click="close">返回</button>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				modal: false, //蒙层
				AuthorizationModal: false,
				successShow: false,
				failureShow: false,
				toast: false,
				WinningShow: false,
				commit1Txt: "分享赚金币",
				cancelTxt: "复制兑换码",
				failureTxt: "",
				code: "",
				token: "",
				RedEnvelopeData: {
					info: {
						title: "整点红包"
					},
					total: 0
				},
				gold: null, //金币数量
				aqyi: {
					name: "爱奇艺VIP月卡",
					gold: 12000
				},
				tengx: {
					name: "腾讯视频VIP月卡",
					gold: 10000
				},
				exchangeType: null,
				convert: null, //邀请码
				money: null, //当前获取金币
				consumptionGold:null //兑换消耗的金币
			}
		},
		components: {

		},
		//获取微信code
		onLoad() {

			//
		},
		beforeCreate() {
			let _this = this;
			_this.token = uni.getStorageSync('token')
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					_this.code = loginRes.code;
					_this.$post(configUrl.getToken, {
						code: _this.code
					}).then((res) => {
						uni.setStorageSync('token', res.data.data.token);
						_this.wxGetSetting(1)
						//整点红包
						_this.$get(configUrl.robRedEnvelope, {
							token: res.data.data.token
						}).then((res) => {
							if (res.data.data.info != null) {
								_this.RedEnvelopeData = res.data.data;
								_this.RedEnvelopeData.list = _this.RedEnvelopeData.list.slice(0, 2)
							}
						})
					})
				}
			})
		},
		//吊起微信原生分享
		onShareAppMessage(res) {
			this.close();
			if (res.from === 'button') { // 来自页面内分享按钮
				this.$post(configUrl.Share, {
					token: uni.getStorageSync("token")
				}).then((res) => {
					console.log(res.data)
				})
			}
			return {
				title: '让红包飞', //分享标题
				path: '/pages/index/index', //页面 path ，必须是以 / 开头的完整路径。
				imageUrl: "", //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径
			}
		},
		methods: {
			//获取用户信息
			onGotUserInfo(res) {
				let _this = this;
				_this.modal = false;
				_this.AuthorizationModal = false;
				_this.wxGetSetting(0)
			},
			//授权
			wxGetSetting(type) {
				let _this = this;
				uni.getSetting({
					success: res => {
						if (!res.authSetting['scope.userInfo']) {
							if (type) {
								_this.modal = true;
								_this.AuthorizationModal = true;
							}
							return false;
						}
						uni.getUserInfo({
							provider: 'weixin',
							success: (res) => {
								_this.$get(configUrl.getUserInfo, {
									token: uni.getStorageSync('token'),
									...res.userInfo
								}).then((res) => {
									_this.gold = res.data.data.score
								})
							}
						})
					}
				})
			},
			//抢红包
			RobRedEnvelope() {
				let _this = this;
				let CurrentTime = this.getdate();
				if (CurrentTime > this.RedEnvelopeData.info.endTime) {
					uni.showToast({
						title: "红包已经过期",
						icon: "none"
					})
				} else if (CurrentTime < this.RedEnvelopeData.info.startTime || this.RedEnvelopeData.info.title == "整点红包") {
					uni.showToast({
						title: "红包还没开始",
						icon: "none"
					})
				} else {
					this.$post(configUrl.getRedEnvelope, {
						token: uni.getStorageSync("token"),
						rid: _this.RedEnvelopeData.info.id
					}).then((res) => {
						if (res.data.msg == "SUCCESS") {
							_this.money = res.data.data.money
							_this.WinningShow = true;
						} else {
							uni.showToast({
								title: "红包已领完",
								icon: "none"
							})
							return
						}
					})
				}
			},
			//礼品兑换
			GiftExchange(gold,str) {
				let _this = this;
				this.modal = true;
				this.toast = true;
				if (str = this.aqyi.name) {
					this.exchangeType = 1 //爱奇艺会员
					this.consumptionGold = gold;
				} else {
					this.exchangeType = 2 //腾讯会员
					this.consumptionGold = gold;
				}

			},
			//显示按钮
			showToast() {
				this.modal = true;
				this.toast = true;
			},
			//关闭按钮
			close() {
				this.modal = false;
				this.toast = false;
				this.successShow = false;
				this.failureShow = false;
				this.WinningShow = false;
				this.AuthorizationModal = false;
			},
			//确定按钮
			determine() {
				this.toast = false;
				this.successShow = false;
				if (this.exchangeType == 1) {
					this.exchangeGift(this.aqyi.gold, this.aqyi.name)
				} else {
					this.exchangeGift(this.tengx.gold, this.tengx.name)
				}
			},
			//礼品兑换请求后台接口
			exchangeGift(gold, name) {
				let _this = this;
				if (gold > this.gold) {
					this.failureShow = true;
					this.failureTxt = "金币不足";
					return
				} else {
					this.$get(configUrl.giftExchange, {
						gold: gold,
						giftName: name,
						token: uni.getStorageSync("token")
					}).then(res => {
						_this.convert = res.data.data.convert
						this.successShow = true;
					})
				}
			},
			//复制兑换码
			copy() {
				let _this = this;
				uni.setClipboardData({
					data: _this.convert,
					success: function() {
						console.log('success');
					}
				});
			},
			//时间换算
			getdate() {
				var now = new Date(),
					y = now.getFullYear(),
					m = now.getMonth() + 1,
					d = now.getDate();
				return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
			}
		}
	}
</script>

<style scoped lang="scss">
	button::after {
		border: none;
	}

	input {
		outline: none;
		border: none;
		list-style: none;
	}

	#ReceiveRedEnvelope {
		height: 100%;
		width: 100%;
		background: url("") no-repeat;
		background-size: 100% 100%;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.headPortrait {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 83upx;
					height: 83upx;
					border-radius: 50%;
					position: absolute;
					top: 22upx;
					left: 35upx;
					background: saddlebrown;
					z-index: 10;
				}

				image:nth-child(1) {
					left: 69upx;
					z-index: 9;
					background: red;
				}

				image:nth-child(2) {
					left: 113upx;
					z-index: 8;
					background: green;
				}
			}

			.headTag {
				position: absolute;
				top: 22upx;
				right: 20upx;
				font-family: PingFangSC-Regular;
				font-size: 26upx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: center;
				line-height: 37upx;

				span {
					padding: 0 10upx;
				}
			}
		}

		.RedEnvelope {
			position: absolute;
			top: 136upx;
			left: 129upx;
			right: 129upx;

			p {
				font-family: PingFangSC-Regular;
				font-size: 32upx;
				color: #FFCF85;
				letter-spacing: 0;
				text-align: center;
			}

			div {
				position: relative;

				image {
					width: 493upx;
					height: 592upx;
				}

				button {
					position: absolute;
					top: 100rpx;
					left: 186rpx;
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					background: none;
				}
			}

		}

		.bgBox {
			width: 700upx;
			height: 654upx;
			background: url("") no-repeat;
			background-size: auto 100%;
			margin: 0 auto;
			position: absolute;
			top: 545upx;
			left: 0;
			right: 0;
			padding-top: 40upx;

			p {
				font-family: PingFangSC-Regular;
				font-size: 24upx;
				color: #5D5D5D;
				letter-spacing: 0;
				text-align: center;
			}

			button {
				width: 600upx;
				height: 84upx;
				margin: 20upx auto 30upx;
				border-radius: 42upx;
				border: none;
				background: url("") no-repeat;
				background-size: auto 100%;
			}

			.gifts {
				h6 {
					font-family: PingFangSC-Regular;
					font-size: 24upx;
					color: #000000;
					letter-spacing: 0;
					padding-left: 50upx;
				}

				button {
					width: 600upx;
					height: 110upx;
					margin: 20upx auto;
					border-radius: 55upx;
					border: none;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0;

					span {
						font-family: PingFangSC-Regular;
						font-size: 32upx;
						color: #FFFFFF;
						letter-spacing: 0;
						padding-left: 121upx;
						text-align: center;
						display: block;
					}

					span:nth-child(2) {
						width: 210upx;
						height: 110upx;
						line-height: 110upx;
						color: #FFDC5A;
						padding-left: 0;
						border-top-right-radius: 55upx;
						border-bottom-right-radius: 55upx;
						position: relative;
						overflow: hidden;

						span {
							position: absolute;
							top: 0;
							left: 0;
							padding-left: 0;
							width: 210upx;
							height: 110upx;
							opacity: 0.2;
							background: #000000;
						}
					}
				}

				.aqy {
					background: url("") no-repeat;
					background-size: 100%;
				}

				.tx {
					background: url("") no-repeat;
					background-size: 100%;
				}
			}
		}

		.modalBox {
			width: 100%;
			height: 100%;
			background: #000000;
			opacity: .6;
			position: relative;
			z-index: 100;
		}

		.modalContent {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 626upx;
			height: 766upx;
			z-index: 999999;

			image {
				width: 100%;
				height: 100%;
			}

			h3 {
				position: absolute;
				top: 142upx;
				left: 215upx;
				font-family: LiHeiPro;
				font-size: 64upx;
				color: #FFCC4B;
				text-align: center;
			}

			p {
				position: absolute;
				top: 240upx;
				left: 195upx;
				right: 122upx;
				font-family: PingFangSC-Semibold;
				font-size: 32upx;
				color: #EC4E36;
				letter-spacing: 4upx;
				text-align: center;
				line-height: 54upx;
			}

			span {
				position: absolute;
				top: 426upx;
				left: 238upx;
				font-family: HiraginoSansGB-W3;
				font-size: 24upx;
				color: #4B0808;
				text-align: center;
			}

			.btn {
				position: absolute;
				top: 603upx;
				left: 93upx;
				width: 500upx;
				height: 95upx;
				border-radius: 47.5upx;
				overflow: hidden;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				button {
					width: 50%;
					height: 100%;
					font-family: PingFangSC-Regular;
					font-size: 32upx;
					text-align: center;
					line-height: 95upx;
					border-radius: 0;
					border: none;
				}

				button:first-child {
					color: #5D5D5D;
					background: url("") no-repeat;
					background-size: 100%;
				}

				button:last-child {
					color: #FFFFFF;
					background: url("") no-repeat;
					background-size: 100%;
				}
			}
		}

		.winningBox {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 604upx;
			height: 705upx;
			z-index: 999999;

			image {
				width: 100%;
				height: 100%;
			}

			h3 {
				position: absolute;
				top: 80upx;
				left: 201upx;
				ont-family: PingFangSC-Semibold;
				font-size: 60upx;
				color: #FFCF85;
				letter-spacing: 0;
				text-align: center;
			}

			p {
				position: absolute;
				top: 305upx;
				left: 211upx;
				font-family: PingFangSC-Semibold;
				font-size: 51upx;
				color: #FFD595;
				letter-spacing: 0;
				text-align: center;
			}

			.winningContent {
				position: absolute;
				top: 386upx;
				left: 154upx;
				font-family: PingFangSC-Semibold;
				font-size: 36upx;
				color: #FFD595;
				letter-spacing: 0;
				text-align: center;
				line-height: 50upx;

				span {
					font-family: PingFangSC-Semibold;
					font-size: 42upx;
					color: #FFD595;
					letter-spacing: 0;
					text-align: center;
					line-height: 59upx;
					padding-left: 10upx;
				}
			}

			button {
				position: absolute;
				top: 486upx;
				left: 115upx;
				width: 354upx;
				height: 72upx;
				background: #FFCF85;
				border-radius: 36px;
				font-family: PingFangSC-Semibold;
				font-size: 32upx;
				color: #BA2B2B;
				letter-spacing: 0;
				text-align: center;
				line-height: 72upx;
			}

			.close {
				position: absolute;
				bottom: -130upx;
				left: 227upx;
				border: none;
				padding: 0;
				width: 92upx;
				height: 92upx;
				background: none;
			}
		}

		.toastBox {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 550upx;
			height: 367upx;
			background: #FFFFFF;
			border-radius: 12upx;
			z-index: 9999999;

			div {
				padding: 65upx 109upx 59upx 106upx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 97upx;
					height: 112upx;
				}

				p {
					font-family: PingFangSC-Regular;
					font-size: 28upx;
					color: #333333;
					letter-spacing: 0.42upx;
					line-height: 40upx;
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: center;
					align-items: flex-start;
					padding-left: 39upx;

					b {
						font-family: DINAlternate-Bold;
						font-size: 46upx;
						color: #BA2B2B;
						letter-spacing: 0.42upx;
						line-height: 53upx;
					}

					span {
						font-family: PingFangSC-Regular;
						font-size: 32upx;
						color: #BA2B2B;
						letter-spacing: 0.42upx;
						line-height: 45upx;
					}
				}
			}

			.commit {
				width: 332upx;
				height: 85upx;
				background: #BA2B2B;
				border-radius: 42.5upx;
				color: #FFFFFF;
			}

			.close {
				position: absolute;
				bottom: -224upx;
				left: 229upx;
				border: none;
				padding: 0;
				width: 92upx;
				height: 92upx;
				background: none;
			}
		}

		.toastBoxDouble {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 550upx;
			height: 367upx;
			background: #FFFFFF;
			border-radius: 12upx;
			z-index: 9999999;

			div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 5upx;

				image {
					margin-top: 50upx;
					width: 105upx;
					height: 127upx;
				}

				p:first-child {
					font-family: PingFangSC-Semibold;
					font-size: 36upx;
					color: #000000;
					letter-spacing: 0.54upx;
					text-align: center;
					padding-top: 16upx;
				}

				p:last-child {
					font-family: PingFangSC-Regular;
					font-size: 28upx;
					color: #888888;
					letter-spacing: 0.42upx;
					text-align: center;
					padding-top: 26upx;
				}
			}

			.btn {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 550upx;
				height: 97upx;

				.commit1,
				.cancel {
					font-family: PingFangSC-Regular;
					font-size: 36upx;
					color: #000000;
					text-align: center;
					width: 275upx;
					height: 90upx;
					margin-top: 42upx;
					border-top: 1upx solid #e5e5e5;
					border-radius: 0;
				}

				.commit1 {
					border-bottom-left-radius: 12upx;
				}

				.cancel {
					border-bottom-right-radius: 12upx;
					border-left: 1upx solid #e5e5e5;
				}
			}

			.close {
				position: absolute;
				bottom: -224upx;
				left: 229upx;
				border: none;
				padding: 0;
				width: 92upx;
				height: 92upx;
				background: none;
			}
		}
	}
</style>
